<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="zh_CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <!-- <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1"/>

  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"/> -->
  <link rel="stylesheet" href="/css/materialize.min.css"/>

  <link rel="stylesheet" href="/css/comm100-new.css"/>

  <title>Comm100 - 高效在线客服系统解决方案</title>

</head>
<body>
<ul id="userDropdown" class="dropdown-content">
  <li><a th:if="${userName}" th:text="${userName}" href="/user/basic">用户主页</a></li>
  <li class="divider"></li>
  <li>
    <form th:action="@{/logout}" method="post">
      <input type="submit" class="btn" value="退出"/>
    </form>
  </li>
</ul>
<nav class="top-nav z-depth-2">
  <div class="nav-wrapper white">
    <div class="brand-logo">
      <a href="/" class="logo-link"><img class="logo-img" src="/img/Comm100_logo.png"/></a>
      <span class="brand-title">高效在线客服系统</span>
    </div>
    <ul id="nav-mobile" class="right hide-on-med-and-down" style="">
      <li><a href="javascript:;" class="login-button" th:if="${notLogin}">登录</a></li>
      <li>
        <a href="javascript:;" class="register-button waves-effect waves-light btn" th:if="${notLogin}">注册</a>
      </li>
      <li><a class="dropdown-button" href="#!" th:if="${userName}" th:text="${userName}"
             data-activates="userDropdown">用户名</a></li>
    </ul>
  </div>
</nav>
<div class="container main-container row">
  <div class="side-bar col s2">
    <ul class="config-nav-list z-depth-1">
      <li class="config-nav-item">
        <a href="/user/basic">基本信息</a>
      </li>
      <li class="config-nav-item active">
        <a href="/user/serviceManage">客服管理</a>
      </li>
      <li class="config-nav-item">
        <a href="/user/imgConfig">自定义</a>
      </li>
      <li class="config-nav-item">
        <a href="/user/report">报告</a>
      </li>
    </ul>
  </div>
  <div class="config-content col s10">
    <div class="manage-button-wrapper">
      <a class="add-service-button waves-effect waves-light btn" href="javascript:;">添加</a>
    </div>
    <div class="service-list-wrapper">
      <table class="service-list-table z-depth-1 centered">
        <thead>
        <tr>
          <th>登录名</th>
          <th>密码</th>
        </tr>
        </thead>
        <tbody class="service-list-tbody">
        <!--              <tr>
                        <td>jack</td>
                        <td>********</td>
                        <td><a href="/user/service/jack">查看消息记录</a></td>
                        <td><a href="javascript:;">修改密码</a></td>
                        <td><a href="javascript:;">删除</a></td>
                      </tr>
                      <tr>
                        <td>john</td>
                        <td>********</td>
                        <td><a href="/user/service/john">查看消息记录</a></td>
                        <td><a href="javascript:;">修改密码</a></td>
                        <td><a href="javascript:;">删除</a></td>
                      </tr>-->
        </tbody>
        <tr class="add-service-wrapper" style="display: none;">
          <td><input class="add-service-name" type="text"/></td>
          <td><input class="add-service-passwd" type="password"/></td>
          <td><a href="javascript:;" class="btn waves-effect add-service-submit">确定</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/materialize.min.js"></script>
<script src="/js/comm100-new.js"></script>
<script>
  $(document).ready(function() {
    getServices();

    $('.add-service-submit').on('click', function() {
      var name = $('.add-service-name').val();
      var passwd = $('.add-service-passwd').val();
      requestAddService(name, passwd);
    });

    $('.add-service-button').on('click', function() {
      if($('.add-service-wrapper').css('display') == 'none') {
        showAddServiceContainer();
      }
    });

    $('body').on('click', '.delete-service-button', function() {
      requestDeleteService($(this).parents('tr'));
    });
  });

</script>
</body>
</html>